<template>
  <div class="coniner">
    <div class="content_section">
      <!-- test -->
      <div class="nav_contents">
        <div class="Gold_coins">
          <div class="gold_img">
            <img src="../assets/personal/translate.png" />
          </div>
          <div class="coins_money">{{CharacterCount_value}}</div>
        </div>
        <div class="deaults"></div>
      </div>
      <!-- 222 -->
      <div>
        <div class="coin_sections">
          <!-- 111 -->
          <template v-for="(item, index) in Translation_list">
            <div
              class="coin_recharge"
              :class="is_seledNumber == index ? 'seled_recharge' : ''"
              @click="coin_recharge(index, item.Price,item.Id)"
            >
              <div class="coins_coins">
                <div class="money_coins">
                  <span>{{ item.Characters }}</span> 字符
                </div>
                <div class="discount_discount">
                  <h4>${{ item.Price }}</h4>
                  <p>{{ item.ZheKou }}</p>
                </div>
              </div>
            </div>
          </template>
        </div>
        <!--  -->
        <div class="payment_sections">
          <div class="payment_content">
            <div class="Total_price">总价：${{ money }}</div>
            <div class="pay_button" @click="pay_button()">付款</div>
          </div>
        </div>
      </div>
      <!--  -->
      <!--  -->
    </div>
    <PayMethods
      @closes="closes_models"
      v-if="is_paymethod"
      :is_coin="is_coin"
      :moneys="trans_Id"
    />
  </div>
</template>
<script>
import { GetTranslatebagList } from "../utils/http.js";
//购买翻译包组件
export default {
  props:["CharacterCount_value"],
  name: "MeTranslate",
  data: () => ({
    is_seledNumber: 0,
    Translation_list: [],
    money:"",
    trans_Id:'',
    is_paymethod: false,
    is_coin: true
  }),
  mounted() {
    //个人中心翻译列表的接
    GetTranslatebagList({}).then((res) => {
      if (res.Code == 1) {
        this.Translation_list = res.Obj.List;
        this.money = res.Obj.List[0].Price;
        this.trans_Id = res.Obj.List[0].Id;
      }  
      layer.closeAll();
    });
  },
  methods: {
    coin_recharge(vals, moneys,Id) {
      this.is_seledNumber = vals;
      this.money = moneys;
      this.trans_Id=Id;
    },
    pay_button() {
      this.is_paymethod = true;
    },
    closes_models() {
      this.is_paymethod = false;
    }
  }
};
</script>
<style scoped>
.coniner {
  width: 73%;
  margin: 0 auto;
  background-color: #ffffff;
}
.content_section {
  width: 100%;
  margin: 0 auto;
}
.nav_contents {
  display: flex;
  text-align: center;
  margin-bottom: 30px;
  height: 45px;
}
.Gold_coins {
  display: flex;
  align-items: center;
  width: 50%;
  justify-content: center;
}

.gold_img img {
  width: 3rem;
  height: 3rem;
}
.coins_money {
  position: relative;
  right: 10px;
  font-size: 22px;
  font-family: DIN;
  font-weight: 500;
  color: #3a3c42;
}
.deaults {
  width: 50%;
  background-color: #ececec;
  height: 45px;
  line-height: 45px;
}
.coin_sections {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
.coin_recharge {
  width: 45%;
  margin-bottom: 15px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding-bottom: 10px;
  padding-top: 10px;
}
.seled_recharge {
  background: #f9fafe !important;
  border: 1px solid #4064e3 !important;
  border-radius: 6px;
}
.coins_coins {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
}
.coin_recharge img {
  width: 3rem;
  height: 3rem;
}
.money_coins {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #768194;
}
.money_coins span {
  font-size: 28px;
  font-family: DIN;
  font-weight: bold;
  color: #383e49;
  margin-right: 4px;
}
.money_coins img {
  position: relative;
  right: 10px;
}
.discount_discount {
  font-size: 15px;
  font-family: DIN;
  font-weight: 500;
  color: #858b96;
}
.discount_discount p {
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #4064e3;
}
.payment_sections {
  width: 90%;
  margin: 50px auto 50px auto;
  display: flex;
  justify-content: flex-end;
}
.payment_content {
  width: 60%;
  justify-content: space-between;
  display: flex;
  align-items: center;
}
.pay_button {
  background: linear-gradient(161deg, #637fe7, #3659cf);
  border-radius: 22px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  width: 16%;
  text-align: center;
  line-height: 33px;
}
.Total_price {
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #434a56;
}
</style>